<template>
  <div class="branchWrap">
    <!-- 菜单项标题和展开/收起按钮-->
    <div class="lineHeight28">{{child[prop]}}</div>
    <!-- 子菜单 -->
    <div v-if="hasChild">
      <TreeNode v-for="childNodeData in child.children" :child="childNodeData" :key="childNodeData.index"></TreeNode>
    </div>
  </div>
</template>
<script>
  export default {
    // 必须要写name, 否则在组件内部使用TreeNode标签将无法解析
    name: 'TreeNode',
    props: {
        child:{},
        prop:String
    },
    data: function () {
      return {
      }
    },
    computed: {
      // 是否有子菜单
      hasChild: function () {
        return this.child.children && this.child.children.length
      }
    }
  }
</script>
<style scoped>
.branchWrap {
  margin: 0 -10px;
}
.branchWrap div {
  padding: 0 10px;
  border-bottom: 1px solid #dfe6ec;
}
.branchWrap div:last-child {
  border: none;
}
.lineHeight28 {
  line-height: 28px;
}
</style>